<template>
  <el-dialog :close-on-click-modal="false" draggable :title="title" v-model="visible" width="1000px" append-to-body>
    <el-form label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="子课题名称">
            <el-text>{{ form.topicName }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态">
            <el-text>{{ form.statusName }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="描述" prop="des">
        <el-text>{{ form.des }}</el-text>
      </el-form-item>
      <el-form-item label="备注" prop="memo">
        <el-text>{{ form.memo }}</el-text>
      </el-form-item>
      <el-row>
        <el-col :span="8">
          <el-form-item label="预计开始时间">
            <el-text>{{ form.startTime }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="预警时间">
            <el-text>{{ form.warnTime }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="截止时间">
            <el-text>{{ form.endTime }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="责任部门">
            <el-text>{{ form.deptName }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="负责人">
            <el-text>{{ form.managerName }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <span style="font-weight: 800;font-size: 16px">执行记录</span>
      <el-divider/>
      <el-table
          :data="detailList" style="width: 100%;margin-bottom: 20px">
        <el-table-column prop="time" label="时间" width="120"/>
        <el-table-column prop="userName" label="操作者" width="120"/>
        <el-table-column prop="content" label="日志详情" width="300"/>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
                size="small"
                @click="detailEdit(scope.row)">编辑
            </el-button>
            <el-button
                size="small"
                type="danger"
                @click="detailDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="detailAdd()" style="margin-bottom: 20px"><i
          class="el-icon-plus"/>添加跟进情况
      </el-button>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog :close-on-click-modal="false" draggable :title="detailData.id?'修改跟进情况':'新增跟进情况'" v-model="openDetailData" width="800px"
             append-to-body style="margin-top: 200px!important;">
    <el-form ref="detailForm" :model="detailData" :rules="rules" label-width="100px">
      <el-form-item label="跟进时间" prop="time">
        <el-date-picker
            class="input-width"
            clearable
            v-model="detailData.time"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="详情" prop="content">
        <el-input maxlength="500" type="textarea" rows="4" v-model="detailData.content" placeholder="请输入内容"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="detailSubmit">确 定</el-button>
        <el-button @click="detailCancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="TopicDetail">
import {addBizTopicFollow, delBizTopicFollow, listAllTopicFollow} from "@/api/biz/bizTopicFollow.js";
import {getBizTopic} from "@/api/biz/bizTopic.js";
const {proxy} = getCurrentInstance();
const props = defineProps({
  topicId: {
    type: [Number, String]
  }
});
watch(() => props.topicId, (newValue) => {
  getBizTopic(newValue).then(response => {
    form.value = response.data;
    title.value = form.value.topicName + "-详情";
    getDetailList();
  });
});
const visible = ref(false);
const openDetailData = ref(false);
const detailData = ref({});
const detailList = ref([]);
const title = ref("");
const data = reactive({
  form: {},
  rules: {
    projectId: [
      {required: true, message: "所属项目不能为空", trigger: "submit"}
    ],
    managerId: [
      {required: true, message: "负责人不能为空", trigger: "submit"}
    ],
    startTime: [
      {required: true, message: "预计开始时间不能为空", trigger: "submit"}
    ],
    endTime: [
      {required: true, message: "截止时间不能为空", trigger: "submit"}
    ],
    topicName: [
      {required: true, message: "课题名称不能为空", trigger: "submit"}
    ],
  }
});
const {form, rules} = toRefs(data);

function cancel() {
  visible.value = false;
}

function detailSubmit() {
  let isAdd = !detailData.value.id;
  detailData.value.topicId = form.value.id;
  proxy.$refs["detailForm"].validate(valid => {
    if (valid) {
      addBizTopicFollow(detailData.value).then(response => {
        if (isAdd) {
          proxy.$modal.msgSuccess("新增成功");
        } else {
          proxy.$modal.msgSuccess("修改成功");
        }
        openDetailData.value = false;
        getDetailList();
      })
    }
  })
}

function detailCancel() {
  openDetailData.value = false;
}

function detailAdd() {
  openDetailData.value = true;
  detailData.value = {}
}

function detailEdit(row) {
  openDetailData.value = true;
  Object.assign(detailData.value, row);
}

function detailDelete(row) {
  proxy.$modal.confirm('是否确认删除跟进情况数据项？').then(function () {
    return delBizTopicFollow(row.id);
  }).then(() => {
    getDetailList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {
  });
}

function getDetailList() {
  listAllTopicFollow({topicId: form.value.id}).then(response => {
    detailList.value = response.data;
  });
}

// 显示弹框
function show() {
  visible.value = true;
}
defineExpose({
  show,
});

</script>